<template>
	<view class="u-rela">
		<image class="header-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/env-bg.png">
		</image>
		<!-- 箭头 -->
		<image class="icon-env-1" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-env-1.png"
			mode="widthFix"></image>
		<!-- 地图箭头 -->
		<!-- <navigator url="/pages/agricTrace/growEnv/mymap"> -->
		<image class="icon-env-2" @click="toMymap"
			src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-env-2.png" mode="widthFix">
		</image>
		<!-- </navigator> -->
		<!-- 自定义头部start -->
		<customHeader title="产品溯源"></customHeader>
		<!-- 自定义头部end -->
		<view class="blank"></view>
		<view class="page-wrap">
			<view class="wrap">
				<view class="u-font-34 blod">{{data.title}}</view>
				<view class="u-flex u-m-t-30">
					<image class="icon-env-3 u-m-r-10"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace//icon-env-3.png"
						mode="widthFix">
					</image>
					<text class="u-font-26 u-tips-color">{{data.position}}</text>
				</view>
				<view class="desc">
					{{data.content}}
				</view>
				<scroll-view class="property-wrap" scroll-x>
					<view class="grid">
						<template v-for="(item,index) in data.sensor">
							<view class="item" :key="index" @click="get_trace_history(item,index)"
								:style="index==num ? 'padding: 16rpx 0;border-radius: 10rpx;border: 2px solid #07C160;' : ''">
								<!-- <image class="icon" :src="'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-env-attr-'+(index+1)+'.png'" mode="widthFix"></image> -->
								<image class="icon" :src="require(`../../../static/images/${item.code}.png`)"
									mode="widthFix"></image>
								<text class="name">{{item.name}}</text>
								<text class="value">{{item.value}}</text>
							</view>
						</template>
					</view>
				</scroll-view>
				<view class="charts_p">
					<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex='getIndex' :ontouch="true" />
				</view>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#07C160" v-model="current" :list="list" :mid-button="false" @change="tabbarChange">
		</u-tabbar>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				num: 0,
				code: '',
				current: 1,
				list: [{
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1a.png',
						text: '产品信息',
						customIcon: false,
						url: '/pages/agricTrace/agricInfo/agricInfo'
					},
					{
						text: '生长环境',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2a.png',
						customIcon: false,
						url: '/pages/agricTrace/growEnv/growEnv'
					},
					{
						text: '生长日记',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3a.png',
						customIcon: false,
						url: '/pages/agricTrace/growDiary/growDiary'
					},
					{
						text: '权威监管',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4a.png',
						customIcon: false,
						url: '/pages/agricTrace/authority/authority'
					}
				],
				data: {},
				name: '',
				pieData:[],
				lineData:[],
				xData:[],
				chartData: {},
				opts: {
					dataLabel:false,
					dataPointShape:true,
					touchMoveLimit: 24,
					tooltipShow: true,
					color: ["#07C160"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						show:true,
						padding:5,
						margin:5,
						position:'top',
						float:'center',
						fontColor:'#07C160',
					},
					xAxis: {
						disabled: false,
						disableGrid: true,
						axisLine: false,
						labelCount: 4,
						scrollShow: true,
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						showTitle: true,
						data: [{
								title: "折线"
							},
							{
								title: "柱状图",
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 30,
								linearType: 'custom',
								customColor: [
									'#fff',
									'#07C160'
								]
							},
						},
						tooltip:{
							showBox:true,
						}
					}
				}
			}
		},
		onReady() {
			// this.getServerData();
		},
		onLoad() {
			
			if(this.$store.state.code){
				this.code = this.$store.state.code;
				console.log(this.code,'生长环境');
			}
			
			this.trace_getGrowEnvironment();
		},
		methods: {
			tabbarChange(index) {
				// console.log(index)
				uni.navigateTo({
					url: this.list[index].url
				})
			},

			// 获取生长环境数据
			trace_getGrowEnvironment() {
				this.$http_1({
					url: this.api_1.trace_getGrowEnvironment,
					method: 'get',
					data: {
						code: this.code,
					}
				}).then(res => {
					// console.log(res, '生长环境数据');
					if (res.code == 1) {
						this.data = res.data
						this.name = this.data.sensor[0].name;
						
						this.get_trace_history(this.data.sensor[0], 0)
					}
				})
			},

			//生长环境监测数据历史记录
			get_trace_history(item, index) {
				console.log(item);
				this.name = item.name
				this.num = index;
				this.$http_1({
					url: this.api_1.trace_history,
					method: 'get',
					data: {
						id: item.id,
						start_date: '2024-05-01',
						end_date: '2024-06-05'
					}
				}).then(res => {
					// console.log(res, '生长环境监测数据历史记录');
					this.pieData = [];
					this.lineData = [];
					this.xData = []
					res.data.forEach((el,index1) => {
						this.lineData.push(Number(el.value));
						this.xData.push(el.name);
						if(index1 == 1){
							this.pieData.push(Number(el.value))
						}else{
							this.pieData.push(0)
						}
					})
					this.getServerData(this.xData,this.pieData,this.lineData)
				})
			},

			getServerData(xData,pieData,lineData) {
				let that = this

				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: xData,
						series: [
							{
								name: "",
								index: 1,
								type: "column",
								disableLegend: false,
								legendText:'',
								legendShape:'none',
								data: pieData
							},
							{
								name: that.name,
								type: "line",
								style: "curve",
								color: "#CCEDE2",
								disableLegend: true,
								addPoint:true,
								legendShape:'none',
								data: lineData
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},

			getIndex({currentIndex:{index}}) {
				this.pieData = this.pieData.map((el) => {
					return 0
				});
				
				this.pieData[index] = this.lineData[index];
				this.getServerData(this.xData,this.pieData,this.lineData)
			},

			// 
			toMymap() {
				uni.navigateTo({
					url: '/pages/agricTrace/growEnv/mymap?data=' + JSON.stringify(this.data.location)
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.header-bg {
		// position: relative;
		width: 750rpx;
		height: 670rpx;
		// z-index: 1;
	}

	.icon-env-1 {
		position: absolute;
		left: 351rpx;
		top: 512rpx;
		width: 48rpx;
		height: 48rpx;
		z-index: 2;
	}

	.icon-env-2 {
		position: absolute;
		right: 41rpx;
		top: 574rpx;
		width: 130rpx;
		height: 136rpx;
		z-index: 3;
	}

	.icon-env-3 {

		width: 32rpx;
		height: 32rpx;
	}

	.blank {
		width: 750rpx;
		height: 60rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #fff;
		margin-top: -60rpx;
		position: relative;
	}

	.page-wrap {
		// position: relative;
		// z-index: 2;
		width: 750rpx;
		height: auto;
		padding: 0rpx 40rpx 60rpx;
	}

	.wrap {
		width: 100%;
		height: 100%;
	}

	.desc {
		margin-top: 40rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-indent: 2em;
	}

	.property-wrap {
		white-space: nowrap;
		width: 666rpx;
		margin-top: 50rpx;
		margin-bottom: 50rpx;

		.grid {
			width: 750rpx;
			display: grid;
			grid-template-columns: repeat(5, 20%);
			gap: 50rpx 0;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				height: 208rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 15rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.value {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #07C160;
				}
			}
		}
	}

	.charts_p {
		width: 670rpx;
		height: 360rpx;

		.charts {
			width: 670rpx;
			height: 360rpx;
		}
	}
</style>
<style>
	page {
		padding: 0;
		background-color: #fff;
	}
</style>